<div [formGroup]="data.form">
    <div class="form-group row"
         *ngIf="displayType">
        <label for="resource-type"
               class="col-sm-2 col-form-label">
            Resource Type
        </label>
        <div class="col-sm-10">
            <select class="form-control custom-select"
                    id="resource-type"
                    name="resource-type"
                    [ngClass]="{ 'invalid': hostFormValidated && type.invalid }"
                    [formControlName]="'type'"
                    required>
                <option value="">Please select the type of the resource</option>
                <option value="api">API Resource</option>
                <option value="identity">Identity Resource</option>
            </select>
            <div *ngIf="hostFormValidated && type.invalid"
                 class="form-control-feedback text-danger">
                Please select the type of the resource.
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="resource-name"
               class="col-sm-2 col-form-label">
            <i class="material-icons align-middle"
               title="The unique identifier for this resource.">
                info
            </i>
            Id (*)
        </label>
        <div class="col-sm-10">
            <div class="input-group">
                <input class="form-control"
                       type="text"
                       id="resource-name"
                       name="resource-name"
                       [ngClass]="{ 'invalid': hostFormValidated && name.invalid }"
                       [formControlName]="'name'"
                       required
                       maxlength="200" />
            </div>
            <div *ngIf="hostFormValidated && name.invalid"
                 class="form-control-feedback text-danger">
                Field 'Id' is required.
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="resource-display-name"
               class="col-sm-2 col-form-label">
            <i class="material-icons align-middle"
               title="Application name that will be seen on consent screens.">
                info
            </i>
            Display Name
        </label>
        <div class="col-sm-10">
            <input class="form-control"
                   type="text"
                   id="resource-display-name"
                   name="resource-display-name"
                   [ngClass]="{ 'invalid': hostFormValidated && displayName.invalid }"
                   [formControlName]="'displayName'"
                   maxlength="200" />
        </div>
    </div>
    <div class="form-group row">
        <label for="description"
               class="col-sm-2 col-form-label">Description</label>
        <div class="col-sm-10">
            <textarea class="form-control"
                      rows="3"
                      type="text"
                      id="description"
                      name="description"
                      [formControlName]="'description'"
                      maxlength="1000">
            </textarea>
        </div>
    </div>
</div>